<template>
    <view
        ><up-cell-group class="w-full" style="" :border="true">
            <up-cell v-for="item in items" :key="item.id">
                <template v-slot:icon>
                    <view class="flex box-border">
                        <up-image
                            src="https://img0.baidu.com/it/u=1825491255,3269601434&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
                            width="35px"
                            height="35px"
                            shape="circle"
                            radius="0px"
                            :lazyLoad="true"
                            duration="500"
                        >
                        </up-image>
                    </view>
                </template>
                <template v-slot:title>
                    <view class="flex" flex-row align-center>
                        <view w-full>
                            <text text-size-sm text-rose-600>{{ item.title }}</text>
                        </view>
                        <view>
                            <up-grid class="w-20" col="3" gap="10px">
                                <up-grid-item class="py-0" style="">
                                    <up-icon name="thumb-down" size="18px"> </up-icon>
                                    <up-text text="踩" color="#909399" size="10px"></up-text>
                                </up-grid-item>
                            </up-grid>
                        </view>
                    </view>
                </template>
                <template v-slot:label>
                    <view class="w-full">
                        <up-text color="#4B4B4CFF" size="13px" :text="item.content">> </up-text>
                        <view>
                            <up-tag
                                class="mt-1 my-tag"
                                text="30条回复>"
                                size="mini"
                                shape="circle"
                                color="#606266"
                                borderColor="#606266"
                                plain
                            ></up-tag>
                        </view>
                    </view>
                </template>
            </up-cell>
        </up-cell-group>
    </view>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
interface Content {
    id: number
    title: string
    content: string
}
const props = defineProps({
    items: Array<Content>
})
</script>

<style scoped lang="scss">
.my-tag {
    color: $u-info-disabled;
}
</style>
